<template>
  <div>
    <son ref="sonAll" />
    <el-button class="bg-sky-600" type="primary" size="mini" @click="openDialog">弹出一个模态窗口</el-button>
    <Teleport to="body">
      <div v-if="modeLlOpen" class="model">
        <div>这是一个弹窗，我的父元素是body
          <button class="bg-sky-600" @click="modeLlOpen = false">关闭</button>
        </div>
      </div>
    </Teleport>
  </div>
</template>

<script setup>
import { onMounted, provide, ref, defineAsyncComponent, nextTick } from 'vue'
import son from './components/son.vue';
const name = ref('Alan')
const sonAll = ref(null)
const modeLlOpen = ref(false)

/* const son = defineAsyncComponent({
  loader: () => import('./components/son.vue')
}) */

function getPersonInfo() {
  return `姓名是:${ name.value }`
}

const openDialog = () => {
  modeLlOpen.value = true
}

provide('getPersonInfo', getPersonInfo)
onMounted(async () => {
  await nextTick()
  const map = sonAll.value.data.map
  console.log('son', map[0])
  console.log('env', import.meta.env)
})
// 对外暴露方法和属性
/* defineExpose({
  getPersonInfo
}) */
</script>

<style lang="scss" scoped>
.model {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.model div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 300px;
  padding: 5px;
  background-color: #fff;
}
</style>
